<template>
  <div class="app-container">
    <div class="el-toolbar">
      <div class="el-toolbar-body" style="justify-content: flex-start">
         <!-- 1.导入Excel数据 -->
        <el-button type="primary" icon="el-icon-download" @click="importData"><i class="fa fa-plus"/> 数据导入</el-button>
        <!-- 2.导出Excel数据 -->
        <el-button type="primary" icon="el-icon-upload2" @click="exportData"><i class="fa fa-plus" /> 数据导出</el-button>
      </div>
    </div>

    <!-- 3.数据展示 -->
    <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" width="150"> </el-table-column>

      <el-table-column prop="dictCode" label="编码" width="150">
      </el-table-column>

      <el-table-column prop="value" label="值" width="150"> </el-table-column>

      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
    </el-table>
   <!-- 4.点击导入后的弹出层组件 -->
    <el-dialog title="数据字典导入" :visible.sync="dialogImportVisible" width="480px">
        <el-form label-position="right" label-width="170px">
            <el-form-item label="上传">
                <!-- 
                    参数说明:
                      multiple表示时候支持上传多个文件;
                      on-success表示成功后调用的方法;
                      action表示请求上传的接口路径.
                -->
                <el-upload
                        :multiple="false"
                        :on-success="onUploadSuccess"
                        :action="'http://localhost:8202/admin/cmn/dict/importData'"
                        class="upload-demo">
                    <el-button size="small" type="primary">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">说明:只能上传xls文件，且不能超过500kb</div>
                 </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogImportVisible = false">取消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import dict from "@/api/hospital/dict";
export default {
  data() {
    return {
      /**
       * false: 不弹框;
       * true:  弹框
       */
      dialogImportVisible: false,
      list: [], //数据字典列表数组
    };
  },
  created() {
    // 查第1层
    this.getDictList(1);
  },
  methods: {
    /**
     * 点击后显示弹框组件
     */
    importData() {
        this.dialogImportVisible = true
    },
    /**
     * 上传成功后调用的方法
     */
    onUploadSuccess(response, file) {
        this.$message.info('上传成功')
        this.dialogImportVisible = false
        this.getDictList(1)
    },
    /**
     * 导出数据
     */
    exportData() {
      window.open("http://localhost:8202/admin/cmn/dict/exportData");
    },
    /**
     * 查询数据字典列表
     */
    getDictList(id) {
      dict.dictList(id).then((response) => {
        this.list = response.data.list;
      });
    },
    /**
     * 延迟加载
     */
    load(tree, treeNode, resolve) {
      dict.dictList(tree.id).then((response) => {
        resolve(response.data.list);
      });
    },
  },
};
</script>